<template>
    <common-layout>
        <div class="top">
            <div class="header">
                <img alt="logo" class="logo" src="@/assets/img/logo.png" />
                <span class="title">{{ systemName }}</span>
            </div>
            <div class="desc">卢立法个人网站-前后端分离项目</div>
        </div>
        <div class="login">
            <a-form @submit="onSubmit" :form="form">
                <a-tabs
                    size="large"
                    :tabBarStyle="{ textAlign: 'center' }"
                    style="padding: 0 2px"
                >
                    <a-tab-pane tab="账户密码登录" key="1">
                        <a-alert
                            type="error"
                            :closable="true"
                            v-show="error"
                            :message="error"
                            showIcon
                            style="margin-bottom: 24px"
                        />
                        <a-form-item>
                            <a-input
                                autocomplete="autocomplete"
                                size="large"
                                placeholder="admin"
                                v-decorator="[
                                    'name',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入账户名',
                                                whitespace: true,
                                            },
                                        ],
                                    },
                                ]"
                            >
                                <a-icon slot="prefix" type="user" />
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input
                                size="large"
                                placeholder="888888"
                                autocomplete="autocomplete"
                                type="password"
                                v-decorator="[
                                    'password',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入密码',
                                                whitespace: true,
                                            },
                                        ],
                                    },
                                ]"
                            >
                                <a-icon slot="prefix" type="lock" />
                            </a-input>
                        </a-form-item>
                    </a-tab-pane>
                    <a-tab-pane tab="手机号登录" key="2">
                        <a-form-item>
                            <a-input size="large" placeholder="mobile number">
                                <a-icon slot="prefix" type="mobile" />
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-row :gutter="8" style="margin: 0 -4px">
                                <a-col :span="16">
                                    <a-input size="large" placeholder="captcha">
                                        <a-icon slot="prefix" type="mail" />
                                    </a-input>
                                </a-col>
                                <a-col :span="8" style="padding-left: 4px">
                                    <a-button
                                        style="width: 100%"
                                        class="captcha-button"
                                        size="large"
                                    >
                                        获取验证码
                                    </a-button>
                                </a-col>
                            </a-row>
                        </a-form-item>
                    </a-tab-pane>
                </a-tabs>
                <div>
                    <a-checkbox :checked="true">自动登录</a-checkbox>
                    <a style="float: right">忘记密码</a>
                </div>
                <a-form-item>
                    <a-button
                        :loading="logging"
                        style="width: 100%; margin-top: 24px"
                        size="large"
                        htmlType="submit"
                        type="primary"
                    >
                        登录
                    </a-button>
                </a-form-item>
                <div>
                    其他登录方式
                    <a-icon class="icon" type="alipay-circle" />
                    <a-icon class="icon" type="taobao-circle" />
                    <a-icon class="icon" type="weibo-circle" />
                    <router-link style="float: right" to="/dashboard/workplace">
                        注册账户
                    </router-link>
                </div>
            </a-form>
        </div>
    </common-layout>
</template>

<script>
import CommonLayout from '@/layouts/CommonLayout';
import { login, getRoutesConfig } from '@/services/auth/login';
import { setAuthorization } from '@/utils/request';
import { loadRoutes } from '@/utils/routerUtil';
import { mapMutations } from 'vuex';

export default {
    name: 'Login',
    components: { CommonLayout },
    data() {
        return {
            logging: false,
            error: '',
            form: this.$form.createForm(this),
        };
    },
    computed: {
        systemName() {
            return this.$store.state.setting.systemName;
        },
    },
    methods: {
        ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
        onSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err) => {
                if (!err) {
                    this.logging = true;
                    const parameters = {
                        name: this.form.getFieldValue('name'),
                        password: this.form.getFieldValue('password'),
                    };
                    login(parameters).then(this.afterLogin);
                }
            });
        },
        afterLogin(res) {
            this.logging = false;
            const loginRes = res;
            if (loginRes.code >= 0) {
                const { user, permissions, roles } = loginRes.data;
                this.setUser(user);
                this.setPermissions(permissions);
                this.setRoles(roles);
                setAuthorization({
                    token: loginRes.data.token,
                    expireAt: new Date(loginRes.data.expireAt),
                });
                // 获取路由配置
                getRoutesConfig().then((result) => {
                    const routesConfig = result.data;
                    loadRoutes(
                        {
                            router: this.$router,
                            store: this.$store,
                            i18n: this.$i18n,
                        },
                        routesConfig
                    );
                    this.$router.push('/dashboard/workplace');
                    this.$message.success('登陆成功，欢迎回来', 3);
                });
            } else {
                this.error = loginRes.msg;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.common-layout {
    .top {
        text-align: center;
        .header {
            height: 44px;
            line-height: 44px;
            a {
                text-decoration: none;
            }
            .logo {
                height: 44px;
                vertical-align: top;
                margin-right: 16px;
            }
            .title {
                font-size: 33px;
                color: @title-color;
                font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica,
                    sans-serif;
                font-weight: 600;
                position: relative;
                top: 2px;
            }
        }
        .desc {
            font-size: 14px;
            color: @text-color-second;
            margin-top: 12px;
            margin-bottom: 40px;
        }
    }
    .login {
        width: 368px;
        margin: 0 auto;
        @media screen and (max-width: 576px) {
            width: 95%;
        }
        @media screen and (max-width: 320px) {
            .captcha-button {
                font-size: 14px;
            }
        }
        .icon {
            font-size: 24px;
            color: @text-color-second;
            margin-left: 16px;
            vertical-align: middle;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
                color: @primary-color;
            }
        }
    }
}
</style>
